import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TopicDynamicPage extends StatefulWidget {
  @override
  _TopicDynamicPageState createState() => _TopicDynamicPageState();
}

class _TopicDynamicPageState extends State<TopicDynamicPage> {
  List<String> datas = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20"
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        child: GridView.builder(
            itemCount: datas.length,
            //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                //横轴元素个数
                crossAxisCount: 3,
                //纵轴间距
                mainAxisSpacing: 20.0,
                //横轴间距
                crossAxisSpacing: 10.0,
                //子组件宽高长度比例
                childAspectRatio: 1.0),
            itemBuilder: (BuildContext context, int index) {
              //Widget Function(BuildContext context, int index)
              return getItemContainer(datas[index]);
            }));
  }

  Widget getItemContainer(String item) {
    return Container(
      width: 5.0,
      height: 5.0,
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }
}
